<template>
  <div class="wrapper">主题颜色</div>
  <el-color-picker
    v-model="color"
    @change="colorChange"
    :predefine="predefine"
  />
</template>

<script setup lang="ts">
// 模块引入
import { ref } from 'vue'
import { localCache } from '@/utils/cache'
import colorTool from '@/utils/color'
defineOptions({
  // 组件名称
  name: 'Theme',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const color = ref<string>('#409EFF')
const predefine = ref<string[]>([
  '#409eff',
  '#009688',
  '#536dfe',
  '#ff5c93',
  '#c62f2f',
  '#fd726d'
])

const colorChange = (val: string) => {
  if (val) {
    color.value = val
  }

  localCache.set('THEME_COLOR', JSON.stringify(color.value))

  document.documentElement.style.setProperty('--el-color-primary', color.value)
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`,
      colorTool.lighten(color.value, i / 10)
    )
  }

  document.documentElement.style.setProperty(
    '--el-color-primary-10',
    color.value + 15
  )

  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`,
      colorTool.darken(color.value, i / 10)
    )
  }
}

if (localCache.get('THEME_COLOR')) {
  colorChange(JSON.parse(localCache.get('THEME_COLOR') as string))
}
</script>

<style scoped lang="scss"></style>
